<script setup lang="ts">
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
// import MessageBox from './components/MessageBox/MessageBox.vue'
// import SvgTest from './components/svgtest/SvgTest.vue'
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const drawer = ref(false)

import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { RouterView } from 'vue-router'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
// console.log(import.meta.env.VITE_APP_TITLE)
</script>

<template>
  <!-- <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">
      <el-icon size="20" color="white"><CirclePlus /></el-icon>Primary
    </el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">取消</el-button>
  </div> -->
  <!-- <div>
    <div class="demo-pagination-block">
      <div class="demonstration">All combined</div>
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
  <div>
    <el-button type="primary" style="margin-left: 16px" @click="drawer = true">open</el-button>

    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <span>Hi there!</span>
    </el-drawer>
  </div>

  <div><el-button plain @click="open">Click to open the Message Box</el-button></div>

  <MessageBox></MessageBox>

  <el-icon color="#409efc" class="no-inherit"></el-icon>
  <el-icon>
    <CirclePlus />
  </el-icon>
  <button @click="console.log(123)">env</button>
  <SvgTest name="test" color="green" width="15"></SvgTest>
  <div>
    <p class="testp">hhh</p>
    <TestComp></TestComp>
  </div> -->
  <RouterView></RouterView>
</template>

<style scoped lang="scss">
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.testp {
  color: $color;
}
</style>
